import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'el-autocomplete',
  templateUrl: './el-autocomplete.component.html',
  styleUrls: ['./el-autocomplete.component.css','./autocomplete.css']
})
export class ElAutocompleteComponent implements OnInit {

    // prop
    @Input() props:PropsIntfs={label:'value',value:'value'};
    @Input() popperClass:string;
    @Input() placeholder:string;
    @Input() disabled:boolean;
    @Input() name:string;
    @Input() size:string;
    @Input() value:string;
    @Input() autofous:boolean;
    @Input() triggerOnFocus:boolean=true;
    @Input() customItem:string;
    @Input() icon:string;
    @Input() suggestions:any[];
    @Input() hasPrepend:boolean=false;
    @Input() hasAppend:boolean=false;


    @Output() onIconClick:EventEmitter<any>=new EventEmitter<any>();
    

    // view child
    @ViewChild('prepend') prepend:ElementRef;
    @ViewChild('append') append:ElementRef;
    // state 
    selected:any;
    selectedValue:string='';
    suggestionList:any[]=[];
    highlightIndex:number;


    // methods
    handleFocus(){
        if(this.selectedValue.trim()===''){
            this.suggestionList=this.suggestions;
        }
    }
    handleKeydown(e){
        switch(e.keyCode){
            case 38:this.highlight(this.highlightIndex+1);break;
            case 40:this.highlight(this.highlightIndex-1);break;
            case 13:this.handleKeyEnter();break;
            case 32:this.close();break;
            default:return;
        }
    }
    handleChange (e){
        // console.log(this.selectedValue,e)
        if(this.selectedValue===''){
            this.suggestionList=this.suggestions
        }
    }
    select(e){
        // console.log(e)
        this.selected=e;
        this.selectedValue=e[this.props.value];
        this.suggestionList=[]
    }
    handleModelChange(e){
        // console.log(e)
        this.selectedValue=e;
        if(e.trim()===''){
            this.suggestionList=this.suggestions;
        }
    }
    handleBlur(e){
        // console.log(e.target)
        
    }
    handleComposition(e){
        console.log(e)
    }

    constructor() { }

    ngOnInit() {
        // this.suggestionList=this.suggestions
    }
    ngAfterViewInit(){
        
    }
    // other methods
    highlight(index:number){}
    handleKeyEnter(){}
    close(){}

}
interface PropsIntfs{
    label:string;
    value:string
}
